HTML Input Attributes

HTML इनपुट विशेषताएँ जानें

HTML इनपुट विशेषताएँ

यह अध्याय HTML <इनपुट> तत्व के लिए विभिन्न विशेषताओं का वर्णन करता है।

value

इनपुट फ़ील्ड के लिए प्रारंभिक मान निर्दिष्ट करता है

value="John"
readonly

चरण-मात्र इनपुट फ़ील्ड

readonly
disabled

अक्षम इनपुट फ़ील्ड

disabled
size

दृश्यमान चौड़ाई निर्दिष्ट करता है

size="50"

मूल्य विशेषता

इनपुट मान विशेषता इनपुट फ़ील्ड के लिए प्रारंभिक मान निर्दिष्ट करती है:

उदाहरण

प्रारंभिक (डिफ़ॉल्ट) मानों के साथ इनपुट फ़ील्ड:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>



केवल पढ़ने योग्य विशेषता

इनपुट रीडओनली विशेषता निर्दिष्ट करती है कि इनपुट फ़ील्ड केवल-पढ़ने के लिए है।

केवल-चरण इनपुट फ़ील्ड को बदला नहीं जा सकता (हालाँकि, उपयोगकर्ता इस पर जा सकता है, इसे प्राथमिकता दे सकता है और टेक्स्ट की प्रतिलिपि बना सकता है)।

❗महत्वपूर्ण:

चरण के लिए इनपुट फ़ील्ड का मान केवल चरण सबमिट करते समय भेजा जाएगा!

उदाहरण

चरण-मात्र इनपुट फ़ील्ड:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>



अक्षम विशेषता

इनपुट अक्षम विशेषता निर्दिष्ट करती है कि एक इनपुट फ़ील्ड अक्षम किया जाना चाहिए।

एक अक्षम इनपुट फ़ील्ड अनुपयोगी और गैर-क्लिक करने योग्य है।

❗महत्वपूर्ण अंतर:

अक्षम इनपुट फ़ील्ड मान सबमिट चरण के दौरान नहीं भेजा जाता है!

उदाहरण

अक्षम इनपुट फ़ील्ड:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

readonly vs disabled

  • readonly:केवल चरण के लिए, लेकिन मान सबमिट किया जाएगा
  • disabled:यदि कोई मूल्य नहीं है, तो कोई मान सबमिट नहीं किया जाएगा
  • readonly:उपयोगकर्ता पाठ का चयन कर सकता है
  • disabled:उपयोगकर्ता कुछ नहीं कर सकता
  • readonly:भूरे रंग में दिखाई नहीं देता
  • disabled:यह आमतौर पर भूरे रंग का दिखाई देता है

आकार विशेषता

इनपुट आकार विशेषता इनपुट फ़ील्ड की दृश्यमान चौड़ाई, वर्णों में निर्दिष्ट करती है।

आकार के लिए डिफ़ॉल्ट मान 20 है.

📝नोट:

आकार विशेषता निम्नलिखित इनपुट प्रकारों के साथ काम करती है: टेक्स्ट, खोज, टेल, यूआरएल, ईमेल और पासवर्ड।

उदाहरण

इनपुट फ़ील्ड के लिए चौड़ाई निर्धारित करें:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>



अधिकतम लंबाई विशेषता

इनपुट अधिकतम लंबाई विशेषता इनपुट फ़ील्ड में अनुमत वर्णों की अधिकतम संख्या निर्दिष्ट करती है।

⚠️नोट:

यदि अधिकतम लम्बाई सेट है, तो इनपुट फ़ील्ड वर्णों की निर्दिष्ट संख्या से अधिक स्वीकार नहीं करेगा। हालाँकि, यह विशेषता कोई प्रतिक्रिया नहीं देती है। इसलिए, यदि आप उपयोगकर्ता को सचेत करना चाहते हैं, तो आपको जावास्क्रिप्ट कोड लिखना होगा।

उदाहरण

इनपुट फ़ील्ड के लिए अधिकतम लंबाई निर्धारित करें:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

अन्य महत्वपूर्ण गुण

min & max

न्यूनतम और अधिकतम मान निर्दिष्ट करता है

min="1" max="5"
multiple

एकाधिक मान दर्ज करने की अनुमति देता है

multiple
pattern

एक रेगुलर एक्सप्रेशन निर्दिष्ट करता है

pattern="[A-Z]{3}"
placeholder

एक संक्षिप्त संदर्भ निर्दिष्ट करता है

placeholder="Enter name"
required

एक इनपुट फ़ील्ड आवश्यक है

required
step

कानूनी संख्या अंतराल निर्दिष्ट करता है

step="3"
autofocus

स्वचालित फोकस की अनुमति देता है

autofocus
list

डेटालिस्ट तत्व निर्दिष्ट करता है

list="browsers"

पैटर्न विशेषता

इनपुट पैटर्न विशेषता एक नियमित अभिव्यक्ति निर्दिष्ट करती है जिसके विरुद्ध चरण सबमिट किए जाने पर इनपुट फ़ील्ड का मान जांचा जाना चाहिए।

पैटर्न विशेषता निम्नलिखित इनपुट प्रकारों के साथ काम करती है: टेक्स्ट, दिनांक, खोज, यूआरएल, टेल, ईमेल और पासवर्ड।

💡सहायता नोट:

  • उपयोगकर्ता की सहायता के लिए फ़ॉर्म का वर्णन करने के लिए सार्वजनिक शीर्षक विशेषता का उपयोग करें।
  • हमारे जावास्क्रिप्ट ट्यूटोरियल में रेगुलर एक्सप्रेशन के बारे में और जानें।

उदाहरण

एक इनपुट फ़ील्ड जिसमें केवल तीन वर्ण हो सकते हैं (कोई संख्या या विशेष वर्ण नहीं):

<form>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

आवश्यक विशेषता

इनपुट आवश्यक विशेषता निर्दिष्ट करती है कि चरण सबमिट करने से पहले एक इनपुट फ़ील्ड भरना होगा।

आवश्यक विशेषता निम्नलिखित इनपुट प्रकारों के साथ काम करती है: टेक्स्ट, खोज, यूआरएल, टेल, ईमेल, पासवर्ड, दिनांक पिकर, नंबर, चेकबॉक्स, रेडियो और फ़ाइल।

उदाहरण

आवश्यक इनपुट फ़ील्ड:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

इनपुट प्रतिबंधों पर ध्यान दें

⚠️महत्वपूर्ण चेतावनी:

इनपुट नियंत्रण पूरी तरह से सुरक्षित नहीं हैं, और जावास्क्रिप्ट अवैध इनपुट जोड़ने के कई तरीके प्रदान करता है। इसे सुरक्षित रूप से नियंत्रित करने के लिए इनपुट को प्राप्तकर्ता (सर्वर) द्वारा सत्यापित किया जाना चाहिए!

इनपुट नियंत्रणों की सूची:

गुण उपयोगी इनपुट प्रकार
min & max number, range, date, datetime-local, month, time, week
maxlength text, search, url, tel, email, password
pattern text, date, search, url, tel, email, password
required text, search, url, tel, email, password, date pickers, number, checkbox, radio, file
step number, range, date, datetime-local, month, time, week

अभ्यास

❓INPUT तत्व में आकार विशेषता का डिफ़ॉल्ट मान क्या है?

10
✗ ग़लत! 10 आकार विशेषता का डिफ़ॉल्ट मान नहीं है
15
✗ ग़लत! 15 आकार विशेषता का डिफ़ॉल्ट मान नहीं है
20
✓ ठीक है! आकार विशेषता का डिफ़ॉल्ट मान 20 है

HTML चरण और इनपुट तत्व

टैग व्याख्या
<form> उपयोगकर्ता इनपुट के लिए HTML प्रारूप को परिभाषित करता है
<input> इनपुट नियंत्रण को परिभाषित करता है

🔗अतिरिक्त स्रोत:

सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएँ।